<template>
	<view>
		<view class="title">
			<view>你好,</view>
			<view>欢迎来到社区在线</view>
		</view>
		<view class="input-box">
			<input type="number" placeholder="请输入手机号" v-model="phone" />
		</view>
		<view class="input-box">
			<input type="number" placeholder="请输入验证码" v-model="smsVerifyCode" />
			<text class="getcode" @click="getma">{{ma}}</text>
		</view>
		<view class="input-box">
			<input type="password" placeholder="请输入密码" v-model="password" />
		</view>
		<view class="input-box">
			<input type="password" placeholder="确认密码" v-model="q_password" />
		</view>
		<view class="input-box">
			<input type="text" placeholder="输入推荐码(选填)" v-model="recommendCode" />
		</view>
		<view class="register" @click="$u.throttle(toLogin,1000)">注册</view>
		<view class="agreement">
			<!-- 选择按钮 -->
			<view class="checkbox" :class="{'checkbox-after':select}" @click="checkbox"></view>
			<view class="xieyi">
				<text>我已阅读并同意</text>
				<text>《注册协议》</text>
			</view>
			<view class="gologin">
				<text>已有账号？</text>
				<text @click="goLogin">登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {getsms,zhuce} from"../../api/login.js"
	export default {
		data() {
			return {
				select: false,
				phone: "",
				ma: "获取验证码",
				password: "",
				q_password: "",
				recommendCode: '',
				smsVerifyCode: ''
			}
		},
		onLoad(e) {
			if (uni.getStorageSync("userInfo")) {
				uni.removeStorageSync("userInfo")
			}
			if (e.code) {
				this.recommendCode = e.code
			}
		},
		methods: {
			checkbox() {
				this.select = !this.select
			},
			goLogin() {
				uni.navigateTo({
					url: "./login"
				})
			},
			// 获取验证码
			async getma() {
				if (this.ma == "获取验证码") {
					if (this.$u.test.mobile(this.phone)) {
						let res=await this.get(getsms,{mobile:this.phone})
						// 在此发送异步
						this.msg("验证码发送成功")
						if (this.ma == "获取验证码") {
							let time = 59;
							let timer = setInterval(() => {
								if (time === 0) {
									clearInterval(timer);
									this.ma = "获取验证码"
								} else {
									this.ma = time + "s后获取";
									time--
								}
							}, 1000);
						}
					} else {
						this.msg("手机号未填写或格式不对", "none")
					}
				} else {
					this.msg("稍后重试", "none")
				}
			},
			// 立即注册
			async toLogin(e) {
				
				if(this.phone.trim()==""){
					this.msg("手机号未填写","none")
					return
				}
				if(this.smsVerifyCode.trim()==""){
					this.msg("验证码未填写","none")
					return
				}
				if(this.password.trim()==""){
					this.msg("密码未填写","none")
					return
				}
				if(this.password!=this.q_password){
					this.msg("2次填写的密码不一致","none")
					return
				}
				if(this.select){
					// ?phone&password&SmsVerifyCode
					// 在此发异步recommendCode
					uni.showLoading({
						title:"注册中..."
					})
					let data={phone:this.phone,password:this.password,smsVerifyCode:this.smsVerifyCode}
					if(this.recommendCode.trim()!=''){
						data.recommendCode=this.recommendCode
					}else{
						data.recommendCode=null
					}
					let res=await this.post(zhuce,data)
					this.msg("注册成功")
					setTimeout(()=>{
						this.goLogin()
					},1500)
					console.log(res)
				}else{
					this.msg("未勾选用户协议","none")
				}
			},
		}
	}
</script>

<style>
	.title {
		margin-top: 108rpx;
		margin-left: 78rpx;
		font-size: 50rpx;
		font-weight: 400;
		color: #000000;
	}

	.input-box {
		width: 594rpx;
		margin: 90rpx auto 0;
		border-bottom: 1px solid #E4E4E4;
		padding-bottom: 20rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.getcode {
		font-size: 26rpx;
		color: #F09238;
	}

	.register {
		width: 594rpx;
		height: 80rpx;
		margin: 76rpx auto 0;
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.agreement {
		width: 640rpx;
		margin: 60rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #333333;
	}

	.checkbox {
		width: 30rpx;
		height: 30rpx;
		background: #FFFFFF;
		border: 1px solid #707070;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.checkbox-after {
		background: #F09238;
	}

	.gologin {
		margin-left: 80rpx;
	}

	.gologin :nth-child(2) {
		color: #F09238;
	}

	.xieyi :nth-child(2) {
		color: #F09238;
	}
</style>
